<!-- 打卡展示按钮 -->
<template>
	<view
		@click="$_To('group/group?gid=' + Gid)"
		:style="'order:'+Order+';'+Css"
		class="block-record">
		<view class="_image">
			<image :src="Image" mode="widthFix"></image>
		</view>
		<view class="_center">
			<view class="_center-top">{{Title}}</view>
			<view class="_center-bottom">
				<text>今日 {{todayPost}} 打卡，共有 {{allPost}} 个打卡</text>
			</view>
		</view>
		<view class="_right">
			<view :style="RightButtonCss">
				{{RightButton}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"block-record",
		props:{
			Order: {
				type: Number,
				default: ""
			},
			Gid: {
				type: String,
				default: ""
			},
			Css: {
				type: String,
				default: ""
			},
			Image: {
				type: String,
				default: ""
			},
			Title: {
				type: String,
				default: ""
			},
			RightButton: {
				type: String,
				default: ""
			},
			RightButtonCss: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				todayPost:"",
				allPost:""
			};
		},
		mounted(){
			this.getPost();
		},
		methods:{
			getPost(){
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"gid":this.Gid,
						"createdDate":"today",
						"whitelistKeys":"paginate"
					},
					(res) => {
						this.todayPost = res.data.data.paginate.total;
						this.$_Request(
							"GET","/api/v2/post/list",
							{
								"gid":this.Gid,
								"whitelistKeys":"paginate"
							},
							(res) => {
								this.allPost = res.data.data.paginate.total;
							}
						)
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
.block-record{
	._image{
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
		flex-shrink: 0;
		border-radius: 100%;
	}
	._center{
		flex: 1;
		margin: 0 20rpx;
		._center-top{
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: bold;
			padding-bottom: 15rpx;
		}
		._center-bottom{
			font-size: 22rpx;
			line-height: 22rpx;
			text{
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
	}
	._right{
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
}
</style>